<template>
  <wd-popup
    :model-value="show"
    custom-style="padding-top: 24rpx;background:white;border-radius: 16rpx 16rpx 0 0"
    safe-area-inset-bottom
    position="bottom"
    transition="slide-up"
    @update:model-value="$emit('update:show', $event)"
  >
    <view
      class="close-button"
      @click="$emit('update:show', false)"
    >
      <wd-icon
        name="close"
        size="36rpx"
        color="#333333"
      />
    </view>
    <view class="title">
      您对本次的服务的评价感觉如何呢？
    </view>
    <view class="br" />
    <view class="grade-content">
      <view
        v-for="item in gradeList"
        :key="item.value"
        class="grade-item"
        @click="activeGrade = item.value"
      >
        <v-icon
          size="60rpx"
          :src="getIconSrc(item)"
        />
        <view class="grade-text">
          {{ item.text }}
        </view>
      </view>
    </view>

    <view class="submit-button-container">
      <v-button
        type="primary"
        :custom-style="{ height: '80rpx' }"
        @click="applyComment"
      >
        确定
      </v-button>
    </view>
  </wd-popup>
</template>

<script setup lang="ts">
const props = defineProps<{
  show: boolean;
  product: OrderDetailVO;
}>();

const emits = defineEmits<{
  'update:show': [val: boolean];
}>();

const gradeList = [
  {
    value: 1,
    icon: '@/static/icons/comment-very-dissatisfied.svg',
    activeIcon: '@/static/icons/comment-active-very-dissatisfied.svg',
    text: '很不满'
  },
  {
    value: 2,
    icon: '@/static/icons/comment-dissatisfied.svg',
    activeIcon: '@/static/icons/comment-active-dissatisfied.svg',
    text: '不满'
  },
  {
    value: 3,
    icon: '@/static/icons/comment-neutral.svg',
    activeIcon: '@/static/icons/comment-active-neutral.svg',
    text: '一般'
  },
  {
    value: 4,
    icon: '@/static/icons/comment-satisfied.svg',
    activeIcon: '@/static/icons/comment-active-satisfied.svg',
    text: '满意'
  },
  {
    value: 5,
    icon: '@/static/icons/comment-very-satisfied.svg',
    activeIcon: '@/static/icons/comment-active-very-satisfied.svg',
    text: '很满意'
  }
] as const;

const activeGrade = ref<number>();

const getIconSrc = (item: (typeof gradeList)[number]) => {
  return activeGrade.value === item.value ? item.activeIcon : item.icon;
};

watch(
  () => props.show,
  (val) => {
    if (val) {
      activeGrade.value = undefined;
    }
  }
);

const applyComment = () => {
  if (!activeGrade.value) {
    uni.showToast({ title: '请对本次服务进行评价！', icon: 'none' });
    return;
  }
  emits('update:show', false);
  const pageStore = $store.page();
  pageStore.setParameters({
    order_detail_id: props.product.id,
    sku_id: props.product.sku_id,
    score_content: {
      order_score: activeGrade.value,
      product_score: activeGrade.value,
      service_score: activeGrade.value,
      logistics_score: activeGrade.value
    },
    product: props.product
  });

  uni.navigateTo({ url: '/pages/order/order-comment-confirm' });
};
</script>

<style lang="scss" scoped>
.back-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}
.close-button {
  position: absolute;
  top: 36rpx;
  right: 36rpx;
  z-index: 1;
}

.title {
  line-height: 60rpx;
  text-align: center;
}

.br {
  margin: 20rpx auto;
  height: 1px;
  width: 90%;
}

.grade-content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;

  .grade-item {
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    align-items: center;
  }
}

.submit-button-container {
  margin: 24rpx;
  padding: 10rpx 0;
}
</style>
